<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字" size="small"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getTableData" icon="el-icon-search" size="small">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  icon="el-icon-plus" size="small"  v-on:click="add" >新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="sendTime" label="时间">
			</el-table-column>
			<el-table-column prop="userId" label="用户"    >
			</el-table-column>
			<el-table-column prop="ip" label="ip"  >
			</el-table-column>
			<el-table-column prop="phone" label="手机号码"  >
			</el-table-column>
			<el-table-column prop="title" label="标题"  >
			</el-table-column>
			<el-table-column prop="content" label="内容" width="200" >
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top" >
						<div style="max-width: 400px;">{{ scope.row.content }}</div>
						<div slot="reference" class="name-wrapper" >
							<el-tag >
								{{ scope.row.content }}
							</el-tag>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template scope="scope">
          <el-button type="danger" size="small" @click="shielding(scope.row)" icon="el-icon-shielding">拉黑</el-button>
					<el-button size="small"  @click="edit(scope.row)" icon="el-icon-edit" type="primary">编辑</el-button>
					<el-button type="danger" size="small" @click="del(scope.row)" icon="el-icon-remove">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-remove" size="small">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

    <!--拉黑弹出框-->
    <el-dialog :title="title" :visible.sync="messageFormVisible" :close-on-click-modal="false">
      <el-form :model="message" label-width="80px" :rules="messageFormRules" ref="messageForm">
        <el-form-item label="电话号码" prop="name">
          <el-input v-model="message.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="拉黑原因" prop="name">
          <el-input v-model="message.reason" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="messageFormVisible=false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="listLoading">保存</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>

	export default {
    data() {
      return {
        filters: {
          keyword: ''
        },
        tableData: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [],
        message: {
          phone: [],
          reason: []
        },
        messageFormVisible: false,
        messageFormRules: {
          phone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      selsChange(sels) {
        this.sels = sels;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getTableData();
      },
      //获取用户列表
      getTableData() {
        let para = {
          page: this.page,
          keyword: this.filters.keyword
        };
        this.listLoading = true; //显示加载圈
        this.$http.post("/common/messageSms/pagelist", para).then(result => {
          this.total = result.data.data.total;
          this.tableData = result.data.data.rows;
          this.listLoading = false;  //关闭加载圈
        }).catch(error => {
          this.listLoading = false;
          this.$message({message: "数据加载失败[" + error.message + "]", type: 'error'});

        })
      },
      edit() {
        this.$message({message: "功能未开放", type: 'error'});
      },
      del() {
        this.$message({message: "功能未开放", type: 'error'});
      },
      batchRemove() {
        this.$message({message: "功能未开放", type: 'error'});
      },
      add() {
        this.$message({message: "功能未开放", type: 'error'});
      },
      shielding(){
        this.messageFormVisible = true;
      },
      addSubmit(){
        //提交
        this.$http.post("/common/messageShielding/save",this.message).then(res=>{
          //{success: true, ..
          var ajaxResult = res.data;
          if(ajaxResult.success){
            this.messageFormVisible = false;
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.getTableData();
          }else{
            this.$message({
              message: ajaxResult.message,
              type: 'error'
            });
          }
        });
/*        this.$refs.message.validate((valid) => {
          if (valid) {
            this.$confirm('确认保存吗？', '提示', {}).then(() => {

              let para = Object.assign({}, this.message);

              this.$http.put("/product", para)
                  .then((result) => {
                    this.messagetLoading = false;
                    result = result.data;
                    if (result.success) {
                      this.$message({
                        message: '提交成功',
                        type: 'success'
                      });
                      this.productFormVisible = false; //关闭对话框
                      this.$refs['messageForm'].resetFields();//重置表单
                      this.getTableData(); //重新加载
                    } else {
                      this.$message({
                        message: result.message,
                        type: 'error'
                      });
                      //失败了可能修改了提交
                    }
                  });
            });
          }
        });*/
      },
    },
    mounted() {
      this.getTableData();
    },
	}
</script>
<style scoped>
</style>